<!--
 * @Author: egg1bro
 * @Date: 2023-01-01 10:55:28
 * @LastEditTime: 2023-01-10 16:13:18
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\personInfo\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <!-- 导航栏 -->
    <van-nav-bar title="编辑资料">
        <template #left>
            <van-icon name="arrow-left" size="20" color="#3c3c3c" @click="goMe" />
        </template>
        <template #right>
            <router-link to="/peoplehome" class="right_text">个人主页</router-link>
        </template>
    </van-nav-bar>
    <!-- 个人头像栏目 -->
    <div class="photo">
        <van-uploader :after-read="afterRead" multiple :max-count="2">
            <van-image round width="4rem" height="4rem" fit="cover" position="center" :src="file.content">

                <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                </template>
            </van-image>
        </van-uploader>

        <div class="circle">
            <van-icon class="iconfont" class-prefix='icon' name='zhaoxiangji' size="20" color="#4396f7" />
        </div>

    </div>
    <!-- 个人信息页面 -->
    <div class="personInfo">
        <van-nav-bar @click="goUpdateName">
            <template #left>
                <span class="listname">姓名</span>
            </template>
            <template #right>
                <span style="color:#54a0f7">{{ userInfo.user_name }}</span>
                <!-- <a href="#" style="color:#54a0f7">{{ userInfo.user_name }}</a> -->
                <van-icon name="arrow" size="18" color="#d4d4d4" />
            </template>
        </van-nav-bar>

        <van-nav-bar @click="goSignature">
            <template #left>
                <span class="listname">个性签名</span>
            </template>
            <template #right>
                <span style="color:#d4d4d4">{{ userInfo.user_desc }} </span>
                <van-icon name="arrow" size="18" color="#d4d4d4" />
            </template>

        </van-nav-bar>

        <van-nav-bar @click="goChooseSex">
            <template #left>
                <span class="listname">性别</span>
            </template>
            <template #right>
                <span>{{ userInfo.user_sex }}</span>
                <van-icon name="arrow" size="18" color="#d4d4d4" />
            </template>
        </van-nav-bar>

        <van-nav-bar>
            <template #left>
                <span class="listname">绑定单位</span>
            </template>
            <template #right>
                <span style="color:#d4d4d4">已绑定</span>
                <van-icon name="arrow" size="18" color="#d4d4d4" />
            </template>
        </van-nav-bar>

        <van-nav-bar @click="goManageAccount">
            <template #left>
                <span class="listname">账号管理</span>
            </template>
            <template #right>
                <van-icon name="arrow" size="18" color="#d4d4d4" />
            </template>
        </van-nav-bar>



    </div>
    <!-- 退出登录 -->
    <div class="logout" @click="logOut">
        <van-button color="#ec5445" plain size="large">退出登录</van-button>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'

import { useLoginStore } from '@/stores/login'
// 实例化路由
const router = useRouter()
// 实例化仓库
const loginStore = useLoginStore()
const { getUserInfo } = loginStore
const { userInfo } = storeToRefs(loginStore)

const file = ref({ content: null })

// 文件上传
const afterRead = (file) => {
    file.value = file
    console.log(file);
    // console.log(file.value.content);
};


// 导航栏跳转到我的页面
const goMe = () => {
    router.push('/me')
}
// 跳转到更改用户姓名页面
const goUpdateName = () => {
    router.push('/updateName')
}
// 跳转到更改个信签名页面
const goSignature = () => {
    router.push('/signature')
}
// 跳转到更改性别页面
const goChooseSex = () => {
    router.push('/chooseSex')
}
// 跳转到账号管理页面
const goManageAccount = () => {
    router.push('/manageAccount')
}

// 退出登录
const logOut = () => {
    localStorage.removeItem('token')
    router.push('/login')
}

// 生命周期
onMounted(async () => {
    try {
        await getUserInfo()
        console.log(userInfo.value, 'personInfo');
    } catch (error) {
        return Promise.reject(error)
    }
})

</script>

<style lang="less" scoped>
.van-hairline--bottom:after {
    border-bottom-width: 0;

}

.right_text {
    color: #54a0f7;
    text-decoration: none;
    font-size: 13px;
}

.photo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;

    .circle {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 28.66667vw;
        right: 150px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: white;
    }


}

.personInfo {
    .van-hairline--bottom:after {
        border-bottom-width: 1px;

    }
}

.logout {
    margin: 200px 20px 20px 20px;
    --van-button-large-height: 40px;
}
</style>